import { createFileRoute } from "@tanstack/react-router";
import { BugTrendingChart } from "@/components/dashboard/bug-trending-chart";
import { EnvTrendingChart } from "@/components/dashboard/env-trending-chart";
import { IssuesChart } from "@/components/dashboard/issues-chart";
import { IssuesSummaryChart } from "@/components/dashboard/issues-summary-chart";
import { PassedTrendingChart } from "@/components/dashboard/passed-trending-chart";
import { ScriptTrendingChart } from "@/components/dashboard/script-trending-chart";
import { DashboardSkeleton } from "@/components/dashboard/skeleton";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

export const Route = createFileRoute("/_app/")({
	component: App,
	pendingComponent: () => <DashboardSkeleton />,
});

function App() {
	return (
		<Tabs defaultValue="7" className="h-full p-6 gap-4">
			<TabsList>
				<TabsTrigger value="7">7 days</TabsTrigger>
				<TabsTrigger value="14">14 days</TabsTrigger>
				<TabsTrigger value="30">30 days</TabsTrigger>
			</TabsList>
			<TabsContent value="7" className="h-full flex-1">
				<div className="h-full grid grid-rows-3 gap-6">
					<div className="grid grid-cols-4 gap-6 h-full row-span-1">
						<IssuesSummaryChart />
						<BugTrendingChart />
						<ScriptTrendingChart />
						<EnvTrendingChart />
					</div>
					<div className="grid grid-cols-2 gap-6 h-full row-span-2">
						<PassedTrendingChart />
						<IssuesChart />
					</div>
				</div>
			</TabsContent>
			<TabsContent value="14" className="h-full flex-1"></TabsContent>
		</Tabs>
	);
}
